<template>
  <div class="myHeader">
    <div class="h-left">
      <img class="logo fl" src="./images/school_log.png" alt="" />
      <h1 class="fl title">工大人，有话说论坛</h1>
      <el-button type="primary" size="small" @click="toHome">首页</el-button>
    </div>
    <div class="h-right">
      <ul class="fr">
        <li class="h-item search">
          <div>
            <el-input
              placeholder="请输入内容"
              v-model="searchInput"
              class="input-with-select"
              @input="changeValue"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="goSearch"
              ></el-button>
            </el-input>
          </div>
        </li>
        <li class="h-item">
          <div class="left"></div>
          <el-button type="primary" icon="el-icon-edit" @click="toPost"
            >发帖</el-button
          >
        </li>
        <!-- <li class="h-item">
          <a href="#"><i class="el-icon-s-comment msg"></i></a>
        </li> -->
        <li class="h-item rela" @click="changePerOper">
          <a v-show="isLogin == 1" href="#"
            ><img class="h-sculpture" :src="userInfo.avartarurl" alt="#"
          /></a>
          <a v-show="isLogin == 0" href="#"
            ><img class="h-sculpture" src="@/assets/未登录.png" alt="#"
          /></a>
          <div
            class="per-opertaion"
            v-show="isLogin == 1 && perOperShow == true"
          >
            <router-link :to="'/admin'" v-if="userInfo.isadmin == 1">
              <li class="tac">管理员系统</li>
            </router-link>
            <li class="tac" @click="toHomePage">个人主页</li>
            <li class="tac" @click="logOut">退出登录</li>
          </div>
          <div
            class="per-opertaion"
            v-show="isLogin == 0 && perOperShow == true"
          >
            <li class="tac" @click="toLogin">去登陆</li>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script scoped>
import personApi from "@/api/personApi";
export default {
  data() {
    return {
      isFlushed: false,
      userInfo: "",
      // 用于控制鼠标移上头像是否展示下拉框
      perOperShow: false,
      searchInput: "",
      isLogin: 0,
    };
  },
  created() {
    this.isLogin = sessionStorage.getItem("isLogin");
    if (this.isLogin == null) {
      this.isLogin = 0;
    }
    if (this.isLogin == 1) {
      this.getPersonInfo();
    }

    if (sessionStorage.getItem("searchInput")) {
      this.searchInput = sessionStorage.getItem("searchInput");
    } else {
      this.searchInput = "";
    }
  },
  mounted() {},
  methods: {
    changePerOper() {
      this.perOperShow = !this.perOperShow;
    },
    toHome() {
      this.$router.push({
        name: "topicsquare",
        // query: {
        //   sightIndex: index,
        // },
      });
    },
    toPost() {
      if (this.isLogin) {
        this.$router.push({
          name: "post",
        });
      } else {
        this.$message({
          message: "您还未登陆无法发帖哦~",
          type: "warning",
        });
      }
    },
    toHomePage() {
      this.$router.push({
        name: "mypost",
        // params: {
        //   username: "202003150624",
        // },
      });
    },
    goSearch() {
      if (this.searchInput == "") {
        return;
      }
      this.$router.push({
        path: "/search/tsquare",
      });
      // location.reload();
    },
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    getPersonInfo() {
      personApi.getPersonInfo().then((response) => {
        this.userInfo = response.data[0];
        this.isLogin = true;
      });
    },
    changeValue(value) {
      sessionStorage.setItem("searchInput", this.searchInput);
      if (this.$route.path == "/search/tsquare") location.reload();
    },
    logOut() {
      this.isLogin = 0;
      sessionStorage.clear();
    },
  },
};
</script>

<style scoped>
/*header开始 */
.myHeader {
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding: 0 80px;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.left {
  float: left;
}
.right {
  float: right;
}
.rela {
  position: relative;
}
/*header左侧区域*/
.h-left {
  float: left;
  height: 60px;
}
.logo {
  width: 46px;
  height: 46px;
  margin: 7px 0;
}
.title {
  margin: 0 20px;
}
/*header右侧区域*/
.search {
  width: 300px;
  margin-right: 70px;
}

.h-right {
  float: right;
  height: 60px;
}
.h-item {
  height: 60px;
  float: left;
}
.h-item a:hover {
  color: #409eff;
}
.msg {
  font-size: 30px;
  margin: 15px 20px;
  margin-right: 0;
}
.h-sculpture {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  margin-top: 10px;
  margin-left: 10px;
}
.per-opertaion {
  position: absolute;
  top: 110%;
  /* left: -45px; */
  z-index: 3;
  width: 100px;
  /* height: 150px; */
  border-radius: 5px;
  padding: 5px 0;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.per-opertaion li {
  height: 45px;
  width: 100%;
  line-height: 50px;
  text-align: center;
}
.per-opertaion li:hover {
  background-color: #409eff;
  color: white;
}
.line {
  width: 1px;
  height: 14px;
  background-color: black;
  margin: 23px 10px;
}
</style>
